<template>
  <div class="two">
    <!-- <div class="header-select">
      <el-select
        v-model="value"
        placeholder="请选择"
        size="mini"
        @change="changeNum"
      >
        <el-option
          v-for="item in yearly"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div> -->
    <div id="mainSix"></div>
  </div>
</template>

<script>
//象形图
import * as echarts from 'echarts';
export default {
  data() {
    return {
      value: '',
      yearly: [],
      countrylist: [],
      isLoading: false,
      dateboundlist: {}, //时间为key
      myChart: null,
    }
  },
  mounted() {
    this.getDataDraw();
  },
  methods: {
    //请求数据
    getDataDraw() {
      this.isLoading = true;
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/zonghe/api/algor?name.equals=国防开支
&sort=add_time,desc&size=1`,
        method: "get",
        succeed: (res) => {
          // console.log(res);
          let data = JSON.parse(res[0].outputs)
          let forecast = data.forecast;
          let original = data.original;
          // console.log(original);
          for (let key in original) {
            if (this.yearly.length == 0) {
              for (let item of original[key]) {
                this.yearly.push(item.x);
                this.yearly.sort();
              }
            }
            for (let a of original[key]) {
              let obj = {};
              obj.name = key;
              obj.value = a.y;
              if (!this.dateboundlist[a.x]) {
                this.dateboundlist[a.x] = []
              }
              this.dateboundlist[a.x].push(obj);
            }
          }
          this.yearly.push(Number(this.yearly[this.yearly.length - 1]) + 1);
          this.dateboundlist[this.yearly[this.yearly.length - 1]] = [];
          for (let i in forecast) {
            let small = {};
            small.name = i;
            small.value = forecast[i][0].y;
            this.dateboundlist[this.yearly[this.yearly.length - 1]].push(small);
          }
          this.value = this.yearly[0]
          this.initCharts(this.dateboundlist[this.value]);
        },
        errored: (err) => {
          // console.log(err);
          if (err.response) {
            this.islistLoad = false;
            this.modelsData = [];
          }
        }
      });
    },
    initCharts(seconddata) {
      // console.log(seconddata);
           this.$emit('changeNum','six',{arr: this.yearly,value: this.value})
      const labelSetting = {
        show: true,
        position: 'right',
        offset: [10, 0],
        fontSize: 12
      };
      let namelist = [];
      let datalist = [];
      for (let item of seconddata) {
        namelist.push(item.name);
        datalist.push(item.value)
      }
      var chartDom = document.getElementById('mainSix');
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        textStyle: {
          color: '#fff'
        },
        grid: {
          left: '3%',
          right: '10%',
          top: '3%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: {
          data: namelist,
          type: 'category',
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        series: [{
          type: 'bar',
          label: labelSetting,
          data: datalist
        }]
      };

      // eslint-disable-next-line no-unused-expressions
      option && this.myChart.setOption(option);
                          window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
    },
    //切换数据
    changeNum(val) {
      var option = this.myChart.getOption();
      for (let item of this.dateboundlist[val]) {
        item['symbol'] = 'image://../../../../../static/image/food.png';
      }
      option.series[0].data = this.dateboundlist[val];
      this.myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.two {
  width: 100%;
  height: 100%;
}

.header-select {
  width: 100%;
  height: 30px;
  text-align: center;
}

#mainSix {
  width: 100%;
  height: 100%;
  /* height: calc(100% - 50px); */
}
</style>